<template>
  <div class="carousel-container">
    <el-carousel
      :interval="6000"
      height="400px"
      arrow="always"
      :autoplay="true"
    >
      <el-carousel-item v-for="(slide, index) in slides" :key="index">
        <a :href="slide.link">
          <img :src="slide.img" :alt="slide.title" class="carousel-img" />
          <div class="carousel-caption">
            <h3>{{ slide.title }}</h3>
            <p>{{ slide.description }}</p>
          </div>
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
  
  <script>
export default {
  name: "CarouselComponent",
  props: {
    // slides: Array,
  },
  data() {
    return {
      slides: [
        {
          img: require("@/assets/products/adv-01.jpg"),
          title: "香飘飘奶茶！",
          description:
            "香飘飘的世界 空气中弥漫香香的味道 烟花绽放 浓香在围绕 快乐的闪耀 奶茶就要香飘飘",
          link: "./goodsDetail.html",
        },
        {
          img: require("@/assets/products/3.jpg"),
          title: "康彪皮鞋",
          description:
            "康彪公司坚持以顾客关注焦点的品牌发展战略，所制造的“康彪皮鞋”系列产品；质量可靠、性能优良、款式新颖。",
          link: "./goodsDetail.html",
        },
        {
          img: require("@/assets/products/4.png"),
          title: "乐事薯片，陪伴你的快乐时光！",
          description: "让你的生活更有趣，一口乐事薯片，快乐一整天！",
          link: "./goodsDetail.html",
        },
      ],
    };
  },
};
</script>

<style scoped>
/* 轮播图容器样式 */
.carousel-container {
  max-width: 1200px;
  width: 100%;
  margin: 120px auto; /* 水平居中 */
   /* padding-top: 1000px; */
  /*box-sizing: border-box; */
}

/* 轮播图图片样式 */
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.carousel-img:hover {
  transform: scale(1.02);
}

/* 轮播图文字描述样式 */
.carousel-caption {
  position: absolute;
  bottom: 50px;
  left: 50px;
  background-color: rgba(198, 197, 197, 0.6);
  color: #fff;
  padding: 15px 20px;
  border-radius: 5px;
  max-width: 500px;
}

.carousel-caption h3 {
  margin-top: 0;
  font-size: 24px;
  margin-bottom: 10px;
}

.carousel-caption p {
  margin: 0;
  line-height: 1.6;
  font-size: 14px;
}

/* 调整在不同屏幕尺寸下的样式 */
@media (max-width: 768px) {
  .carousel-container {
    padding: 10px;
  }

  .carousel-caption {
    bottom: 30px;
    left: 20px;
    padding: 10px 15px;
  }

  .carousel-caption h3 {
    font-size: 20px;
  }

  .carousel-caption p {
    font-size: 12px;
  }
}
</style>